<script>
/**
 * @desc 首页
 */

import { mapState } from 'vuex'
import { dateFormate, navTo } from '@/utils'
import HomeSearchBar from './home-search-bar'
import HomeBanner from './home-banner'
import HomeNav from './home-nav'
import HomeSlide from './home-slide'
import HomeSectionTitle from './home-section-title'
import ServiceLayer from '@/components/service-layer.vue'
// icons
import iconA from '@/assets/icons/house.png'
import iconB from '@/assets/icons/travel.png'
import iconC from '@/assets/icons/travel-guide.png'
import iconD from '@/assets/icons/advice.png'
import iconE from '@/assets/icons/custom.png'

export default {
  name: 'home-page',
  components: { HomeSearchBar, HomeBanner, HomeNav, HomeSectionTitle, HomeSlide, ServiceLayer },
  data: () => ({
    showService: false,
    iconA,
    iconB,
    iconC,
    iconD,
    iconE
  }),
  computed: {
    ...mapState('TravelList', { travelList: 'initList' }),
    formateTravelList() {
      return this.travelList.map(v => ({
        id: v.id,
        title: v.name,
        url: `https://source.hilval.com${v.picture}`,
        price: v.singlePersonPrice
      }))
    }
  },
  methods: {
    navTo,
    handleService(bool) {
      this.showService = bool
    }
  },

  // wx lifeCycle
  onShow() {
    this.showService = false
  }
}
</script>

<template>
  <div class="home-page">
    <home-search-bar />
    <home-banner />
    <div class="home-nav">
      <div
        class="item"
        @click="()=>navTo('travel-list')"
      >
        <img :src="iconB" class="icon" />
        <p class="text">旅游路线</p>
      </div>
      <div
        class="item"
        @click="handleService(true)"
      >
        <img :src="iconE" class="icon" />
        <p class="text">私人定制</p>
      </div>
      <div
        class="item"
        @click="handleService(true)"
      >
        <img :src="iconD" class="icon" />
        <p class="text">咨询客服</p>
      </div>
    </div>

    <div class="home-section" v-if="!!formateTravelList.length">
      <home-section-title text="热门推荐" to="travel-list" />
      <home-slide :list="formateTravelList"/>
    </div>

    <!-- <div class="home-section">
      <home-section-title text="热门攻略" />
      <home-slide :list="hot"/>
    </div> -->
    <service-layer :show="showService" :handleClose="()=>handleService(false)" />
  </div>  
</template>

<style lang="scss" scoped>
@import './styles.scss';
</style>

